<template>
  <div class="page-cont">
    <van-nav-bar
      title="钢筋加工管理"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <scroll-list
      v-if="!loading"
      v-model="list"
      @onLoad="onLoad"
    >
      <product-item
        v-for="(item, i) in list"
        :key="i"
        :data="item"
      />
    </scroll-list>
    <div
      class="loading"
      v-else
    >
      <van-loading />
    </div>
    <div class="option">
      <van-button
        type="info"
        @click="$router.push({path: '/dayplan', query: {type: 'steel'} })"
      >
        计划梁片
      </van-button>
      <van-button
        type="info"
        @click="showImage"
      >
        查看样图
      </van-button>
      <van-button
        type="info"
        @click="$router.push('/steel/product/append')"
      >
        录入加工记录
      </van-button>
    </div>
  </div>
</template>

<script>
import ScrollList from '@/components/ScrollList/index.vue'
import ProductItem from './components/ProductItem.vue'
import { ImagePreview } from 'vant';

export default {
  name: "SteelProduct",
  components: {
    ProductItem,
    ScrollList
  },
  data() {
    return {
      loading: false,
      list: [],
    };
  },
  created() {
  },
  methods: {
    showImage() {
      ImagePreview([
        require('./image/1.jpg')
      ]);
    },
    async onLoad(page, done) {
      let res = await this.api.GET_STEEL_PRODUCE_LIST({pageNo: page, pageSize: 10})
      this.list.push(...res.list)

      // 触发加载完成 大于50模拟全部加载完成
      done(res.pageNo === res.totalPage)
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
